<template>
	<div class="excellent">
		<div class="tableBox" style="padding-bottom:30px;">
			<div class="title">残个装品</div>
			<el-table :data="tableData" max-height="400px" :span-method="objectSpanMethod">
				<el-table-column prop="shift" label="班次" width="200" show-overflow-tooltip></el-table-column>
				<el-table-column prop="boxName" label="箱型(枚)" align="center" min-width="200">
				</el-table-column>
				<el-table-column prop="boxNum" label="箱数(箱)" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.boxNum" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="num" label="每箱数量(枚)" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.num" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="total" label="总数量(枚)" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.total" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="tableBox" style="margin-top:30px;">
			<div class="title">内装机消耗</div>
			<el-table :data="tableData2" max-height="550px" :span-method="objectSpanMethod2">
				<el-table-column prop="shift" label="产品型号" align="center" width="200" show-overflow-tooltip></el-table-column>
				<el-table-column prop="boxName" label="产品种类" align="center" min-width="200">
				</el-table-column>
				<el-table-column prop="boxNum" label="箱数(箱)" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.boxNum" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="num" label="产品数(枚)" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.num" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
			</el-table>
			<el-form ref="form1" label-position="left" :model="form1" label-width="50%" style="margin-top:30px;">
				<el-form-item label="内装机损耗(kg)"><div><el-input v-model="form1.num1" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="折合数(枚)"><div><el-input v-model="form1.num2" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="合计(枚)"><div><el-input v-model="form1.num3" placeholder="请输入枚数"></el-input></div></el-form-item>
			</el-form>
		</div>
		<div class="tableBox" style="margin-top:30px;">
			<div class="title">产品优良</div>
			<el-form ref="form2" label-position="left" :model="form2" label-width="50%">
				<el-form-item label="产品加工总数(枚)"><div><el-input v-model="form2.num4" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="良品总数(枚)"><div><el-input v-model="form2.num5" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="实际良品总数(枚)"><div><el-input v-model="form2.num6" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="画面不良率(%)"><div><el-input v-model="form2.num7" placeholder="请输入不良率"></el-input></div></el-form-item>
				<el-form-item label="实际不良率(%)"><div><el-input v-model="form2.num8" placeholder="请输入不良率"></el-input></div></el-form-item>
				<el-form-item label="运转速度(枚/分)"><div><el-input v-model="form2.num9" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="个装品差异(枚)"><div><el-input v-model="form2.num10" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="修正后不良率(%)"><div><el-input v-model="form2.num11" placeholder="请输入不良率"></el-input></div></el-form-item>
			</el-form>
		</div>
		<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				form1: {
					num1: '',
					num2: '',
					num3: '',
				},
				form2:{
					num4: '',
					num5: '',
					num6: '',
					num7: '',
					num8: '',
					num9: '',
					num10: '',
					num11: '',
				},
				tableData:[
						{
							shift: '前班',
							boxName: '周转箱',
							boxNum:'',
							num: '',
							total:'',
						},
						{
							shift: '前班',
							boxName: '纸箱',
							boxNum:'',
							num: '',
							total:'',
						},
						{
							shift: '后班',
							boxName: '周转箱',
							boxNum:'',
							num: '',
							total:'',
						},
						{
							shift: '后班',
							boxName: '纸箱',
							boxNum:'',
							num: '',
							total:'',
						}
				],
				tableData2:[
						{
							shift: '13-1',
							boxName: '品种1',
							boxNum:'',
							num: '',
							total:'',
						},
						{
							shift: '13-1',
							boxName: '品种2',
							boxNum:'',
							num: '',
							total:'',
						},
						{
							shift: '13-2',
							boxName: '品种1',
							boxNum:'',
							num: '',
							total:'',
						},
						{
							shift: '13-2',
							boxName: '品种2',
							boxNum:'',
							num: '',
							total:'',
						},
						{
							shift: '13-3',
							boxName: '品种1',
							boxNum:'',
							num: '',
							total:'',
						},
						{
							shift: '13-3',
							boxName: '品种2',
							boxNum:'',
							num: '',
							total:'',
						}
				],
				spanArr: [],
				position: 0,
				spanArr2: [],
				position2: 0,
			}
		},
		mounted() {
			this.rowspan();
			this.rowspan2();
		},
		methods: {
			rowspan() {
					this.tableData.forEach((item,index) => {
							if( index === 0){
									this.spanArr.push(1);
									this.position = 0;
							}else{
									if(this.tableData[index].shift === this.tableData[index-1].shift ){
											this.spanArr[this.position] += 1;
											this.spanArr.push(0);
									}else{
											this.spanArr.push(1);
											this.position = index;
									}
							}
					})
			},
			objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
				 if (columnIndex === 0) {
						 const _row = this.spanArr[rowIndex];
						 const _col = _row>0 ? 1 : 0;
						 return {
								 rowspan: _row,
								 colspan: _col
						 }
				 }
				 if(columnIndex === 3){
						 const _row = this.spanArr[rowIndex];
						 const _col = _row>0 ? 1 : 0;
						 return {
								 rowspan: _row,
								 colspan: _col
						 }
				}
		  },
			rowspan2() {
					this.tableData2.forEach((item,index) => {
						if( index === 0){
								this.spanArr2.push(1);
								this.position2 = 0;
						}else{
								if(this.tableData2[index].shift === this.tableData2[index-1].shift ){
										this.spanArr2[this.position2] += 1;
										this.spanArr2.push(0);
								}else{
										this.spanArr2.push(1);
										this.position2 = index;
								}
						}
				})
			},
			objectSpanMethod2({ row, column, rowIndex, columnIndex }) {  //表格合并行
				 if (columnIndex === 0) {
						 const _row = this.spanArr2[rowIndex];
						 const _col = _row>0 ? 1 : 0;
						 return {
								 rowspan: _row,
								 colspan: _col
						 }
				 }
				 if(columnIndex === 3){
						 const _row = this.spanArr2[rowIndex];
						 const _col = _row>0 ? 1 : 0;
						 return {
								 rowspan: _row,
								 colspan: _col
						 }
				}
			},
			onSubmit() {
				console.log('submit!');
			}
		}
	}
</script>
<style lang="scss" scoped>
	.excellent{
		.title{
			font-weight:600;
			padding-top:10px;
		}
	}
</style>
<style scoped>
.excellent{
	height: calc(100vh - 150px);
	overflow-y: auto;
}
.tableBox {
	border-radius: 10px;
	background:#fff;
	padding: 10px 30px;
	height:auto;
}
.excellent >>> .el-form-item{
	border-bottom:solid 1px #eeeeee;
	padding-bottom:5px;
}
.excellent >>> .el-form-item__label{
	font-size:24px;
	color:#000;
	line-height: 60px;
}
.excellent >>> .el-form-item__content{
	font-size:24px;
	color:#666666;
}
.excellent >>> .el-input > input{
	background:#fff;
	font-size:24px;
}
</style>
